<template>
  <div id="user-info">
    <h2>个人资料</h2>
    <div style="margin-left: 35%">
      <el-form ref="form" :model="form">
        <el-form-item>
          <el-upload
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="user.imageUrl" :src="require(`@/assets/${user.imageUrl}`)" class="avatar" style="height: 75px;width: 75px;margin-left: 100%">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <p>姓名：
            <el-input v-model="user.userName" placeholder="请输入内容" style="width: 200px"></el-input>
          </p>
        </el-form-item>
        <el-form-item>
          <p>性别：
            <el-radio v-model="user.sex" label="1">男</el-radio>
            <el-radio v-model="user.sex" label="0">女</el-radio>
          </p>
        </el-form-item>
        <el-form-item>
          <p>电话：
            <el-input v-model="user.tel" placeholder="请输入内容" style="width: 200px"></el-input>
          </p>
        </el-form-item>
<!--        <el-form-item>-->
<!--          <p>密码：-->
<!--            <el-input v-model="user.password" placeholder="请输入内容" style="width: 200px" show-password></el-input>-->
<!--          </p>-->
<!--        </el-form-item>-->
        <el-form-item>
          <p>邮箱：
            <el-input v-model="user.email" placeholder="请输入内容" style="width: 200px"></el-input>
          </p>
        </el-form-item>
        <el-form-item>
          <p>院系班级：
            {{this.user.college}}
          </p>
          <p>
            班级：{{this.user.classGrade}}级{{this.user.classMajor}}{{this.user.classNumber}}班
          </p>
          <p>
            座号：{{this.user.classIndex}}号
          </p>
        </el-form-item>
        <el-form-item>
          <el-button type="info" plain style="width: 125px" @click="returnUrl()">保存</el-button>
          <el-button type="info" plain style="width: 125px" @click="returnUrl()">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserInfo",
  data() {
    return {
      user: {
        imageUrl: localStorage.getItem('userHead'),
        userName: localStorage.getItem('userName'),
        sex: localStorage.getItem('sex'),
        tel: localStorage.getItem('userTel'),
        // password: localStorage.getItem('userPassword'),
        email: localStorage.getItem('userEmail'),
        college:localStorage.getItem('studentCollege'),
        classGrade:localStorage.getItem('studentClassGrade'),
        classMajor:localStorage.getItem('studentClassMajor'),
        classNumber:localStorage.getItem('studentClassNumber'),
        classIndex:localStorage.getItem('studentClassIndex')
      },
      form: {}
    }
  },
  methods: {
    returnUrl() {
      this.$router.push('/Home/Course')
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      if (isJPG && isLt2M == true) {
        console.log(file);

        //将文件转化为formdata数据上传
        let fd = new FormData()
        fd.append('file', file)
        console.log(fd)

        // post上传图片

        let that = this

        new Promise(function (resolve, reject) {
          that.axios.post('/file/imgUpload', fd,
            {
              headers: {
                'Content-Type': 'multipart/form-data'
              }
            }).then((response) => {
            that.imgId = response.data.data
            resolve(that.imgId);
          }).catch((error) => {
            this.$message.error('头像上传失败，请重新上传!');
          })
        }).then(function (id) {
          that.axios.get('/file/view/' + id)
            .then((response) => {
              that.imageUrl = response.request.responseURL;
            })
        })
      }
      return isJPG && isLt2M;
    }
  }
}
</script>

<style scoped>
#user-info {
  background: white;
  height: 650px;
  margin-top: -15px;
  padding: 25px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-form-item{
  margin: 0px;
}
p{
  margin: 8px;
}
</style>
